<%@ page import="bean.Seat" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>座位平面图</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">
    <script type="javascript" src="../js/bootstrap.min.js"></script>
    <script type="javascript" src="../js/bootstrap.js"></script>
<style>
    body{
        background-color:darkslategray;
        font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    table{border-spacing: 12px 30px;}

    .showcase{
        background-color:olive;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        list-style-type: none;
        width: 70%;
        height: 7%;
        margin: 30px auto;
        padding: 5px 10px;
    }
    .showcase li{
        color:lightgray;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 10px;
    }

    .seat{
        background-color:darkgrey;
        width: 30px;
        height: 16px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        margin: 0 3px;
    }
    .occupied{
        background-color:floralwhite;
        width: 30px;
        height: 16px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        margin: 0 3px;
    }
    .broken{
        background-color:salmon;
        width: 30px;
        height: 16px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        margin: 0 3px;
    }
    .seat:hover{
        /*background-color: floralwhite;*/
        transform: scale(1.2);
        cursor:pointer;
    }
    /*.seat:not(.occupied):hover{*/
    /*         !*background-color: floralwhite;*!*/
    /*         transform: scale(1.2);*/
    /*         cursor:pointer;*/
    /*     }*/
    .seat:active{
        background-color: floralwhite;
        cursor:pointer;
    }
    .seat:nth-last-of-type(2){
        margin-left: 20px;
    }
    .seat:nth-last-of-type(6){
        margin-left: 20px;
    }
    .all{
        height: 73%;
        width: 100%;
    }
    .body_one{
        height:50%;
        width: 100%;
        border: 1px #00aa00 solid;
    }
    .body_one_left{
        height: 100%;
        width: 50%;
        border:1px #0055f0 solid;
        float: left;
    }
    .body_one_left_head{
        height: 10%;
        width: 40%;
        background-color:#ffe9cc;
        margin:0 auto;
        text-align: center;
    }
    .body_one_left_head h1{
        font-size: 20px;
        color: black;
    }
    .body_one_right{
        height: 100%;
        width: 49%;
        border:1px #00aa00 solid;
        float: right;
    }
    .body_two{
        height:49%;
        width: 100%;
        border: 1px #00ffff solid;
    }
    .body_two_left{
        height: 100%;
        width: 50%;
        border:1px white solid;
        float: left;
    }
    .body_two_right{
        height: 100%;
        width: 49%;
        border:1px #00aa00 solid;
        float: right;
    }
.mm{
    height: 10%;
}
</style>
    <script>
        let ojseat = document.getElementsByClassName("seat");
        let ojbroken = document.getElementsByClassName("broken");
        let ojoccupied = document.getElementsByClassName("occupied");

        window.onload = function () {
            function datetime() {
                let now = new Date();
                if(now.getMonth()+1>9){
                    document.getElementById("time").value = now.getFullYear() + "-"
                        + (now.getMonth() + 1) + "-" + now.getDate();
                }else {
                    document.getElementById("time").value = now.getFullYear() + "-0"
                        + (now.getMonth() + 1) + "-" + now.getDate();
                }
                document.getElementById("time").value += " " + now.getHours() + ":"
                    + now.getMinutes() + ":" + now.getSeconds();
                return document.getElementById("time").value;
            }
            for (let i = 0; i<ojbroken.length; i++) {
                ojbroken[i].onclick = function (){alert("此座位已损坏，仍在维修中");}
            }
            for (let i = 0; i<ojoccupied.length; i++){
                ojoccupied[i].onclick = function (){alert("此座位今天已预约满了，没有可预约时间段");}
            }
            for (let i = 0; i < ojseat.length; i++) {
                ojseat[i].onclick = function () {
                    document.getElementById("seat_name").value=ojseat[i].id;
                    document.getElementById("time1").value = datetime();
                    console.log(ojseat[i].id)
                    document.getElementById("form1").submit();
                }
            }
            tip();
        }
        function tip () {
            let s_or_f = "<%=request.getAttribute("s_or_f")%>";
            if (s_or_f !== "null") {
                alert(s_or_f);
                console.log(s_or_f);
            } else {
                console.log(s_or_f);
                console.log("未执行");
            }
        }
    </script>
  <%--<script>


      let ojseat = document.getElementsByClassName("seat");
      let ojbroken = document.getElementsByClassName("broken");
      let ojoccupied = document.getElementsByClassName("occupied");

    window.onload = function () {
        for (let i = 0; i<ojbroken.length; i++) {
            ojbroken[i].onclick = function (){alert("此座位已损坏，仍在维修中");}
        }
        for (let i = 0; i<ojoccupied.length; i++){
            ojoccupied[i].onclick = function (){alert("此座位今天已预约满了，没有可预约时间段");}
        }
        for (let i = 0; i < ojseat.length; i++) {
            ojseat[i].onclick = function () {
                let seat_name = ojseat[i].id;
                window.open('/Appointment.jsp?' + seat_name, 'Appointment', 'height = 650, width = 700,left = 450,top = 150');
            }
        }
    }
&lt;%&ndash;      windows 的方法 ——》 alert console.log prompt&ndash;%&gt;
  </script>--%>

</head>
<body>
<%
    int m=0;
    List<Seat> seatList = (List<Seat>)request.getAttribute("seatlist");
%>

<ul class="showcase">
    <li>
        <div class="seat"></div>
        <small>可预约</small>
    </li>
    <li>
        <div class="occupied"></div>
        <small>预约满</small>
    </li>
    <li>
        <div class="broken"></div>
        <small>维修中</small>
    </li>
</ul>
<div class="all">
<form id="form1" action="LogsServlet">
<div class="body_one">
    <div class="body_one_left">
        <div class="body_one_left_head"><h1>自然科学一区</h1></div>
<table>
    <%
        m=0;
        for(int i=0;i<seatList.size();i++){
            Seat seat = seatList.get(i);
            if ((m)%10 == 0){
    %><tr><%}%>
        <%if(seat.getAreaname().equals("自然科学一区")){
            if(seat.getUsestatus().equals("预约满")){%>
        <td class="occupied" id="<%=seat.getSeatnum()%>"><%=seat.getSeatnum()%></td><td>&nbsp;</td>
    <%m++;}else if(seat.getUsestatus().equals("维修中")){%>
        <td class="broken" id="<%=seat.getSeatnum()%>"><%=seat.getSeatnum()%></td><td>&nbsp;</td>
    <%m++;}else{%>
        <td class="seat" id="<%=seat.getSeatnum()%>"><%=seat.getSeatnum()%></td><td>&nbsp;</td>
    <%m++;}}}%>
    </tr>
    </table>

    </div>

    <div class="body_one_right">
        <div class="body_one_left_head"><h1>自然科学二区</h1></div>
        <table>
            <%
                m=0;
                for(int i=0;i<seatList.size();i++){
                    Seat seat = seatList.get(i);
                    if ((m)%10 == 0){
            %><tr><%}%>
            <%if(seat.getAreaname().equals("自然科学二区")){
                if(seat.getUsestatus().equals("预约满")){%>
            <td class="occupied" id="<%=seat.getSeatnum()%>"><%=seat.getSeatnum()%></td><td>&nbsp;</td>
            <%m++;}else if(seat.getUsestatus().equals("维修中")){%>
            <td class="broken" id="<%=seat.getSeatnum()%>"><%=seat.getSeatnum()%></td><td>&nbsp;</td>
            <%m++;}else{%>
            <td class="seat" id="<%=seat.getSeatnum()%>"><%=seat.getSeatnum()%></td><td>&nbsp;</td>
            <%m++;}}}%>
        </tr>
        </table>
    </div>
</div>
<div class="body_two">
    <div class="body_two_left">
        <div class="body_one_left_head"><h1>自然科学三区</h1></div>
        <table>
            <%
                m=0;
                for(int i=0;i<seatList.size();i++){
                    Seat seat = seatList.get(i);
                    if ((m)%10 == 0){
            %><tr><%}%>
            <%if(seat.getAreaname().equals("自然科学三区")){
                if(seat.getUsestatus().equals("预约满")){%>
            <td class="occupied" id="<%=seat.getSeatnum()%>"><%=seat.getSeatnum()%></td><td>&nbsp;</td>
            <%m++;}else if(seat.getUsestatus().equals("维修中")){%>
            <td class="broken" id="<%=seat.getSeatnum()%>"><%=seat.getSeatnum()%></td><td>&nbsp;</td>
            <%m++;}else{%>
            <td class="seat" id="<%=seat.getSeatnum()%>"><%=seat.getSeatnum()%></td><td>&nbsp;</td>
            <%m++;}}}%>
        </tr>
        </table>
    </div>

    <div class="body_two_right">
        <div class="body_one_left_head"><h1>自然科学四区</h1></div>
        <table>
            <%
                m=0;
                for(int i=0;i<seatList.size();i++){
                    Seat seat = seatList.get(i);
                    if ((m)%10 == 0){
            %><tr><%}%>
            <%if(seat.getAreaname().equals("自然科学四区")){
                if(seat.getUsestatus().equals("预约满")){%>
            <td class="occupied" id="<%=seat.getSeatnum()%>"><%=seat.getSeatnum()%></td><td>&nbsp;</td>
            <%m++;}else if(seat.getUsestatus().equals("维修中")){%>
            <td class="broken" id="<%=seat.getSeatnum()%>"><%=seat.getSeatnum()%></td><td>&nbsp;</td>
            <%m++;}else{%>
            <td class="seat" id="<%=seat.getSeatnum()%>"><%=seat.getSeatnum()%></td><td>&nbsp;</td>
            <%m++;}}}%>
        </tr>
        </table>
    </div>
</div>
    <input id="time" hidden="hidden" name="time" value="">
    <input id="time1" hidden="hidden" name="time1" value="">
    <input type="text" hidden="hidden" name="seat_name" id="seat_name" value="">
    <input type="text" hidden="hidden" name="person_id" id="person_id" value="<%=session.getAttribute("id")%>">
</form>
</div>
<div class="mm"><nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="SeatServlet" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a href="SeatServlet">1</a></li>
        <li><a href="SeatTwoServlet">2</a></li>
        <li>
            <a href="SeatTwoServlet" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav></div>
</body>
</html>
